<template>
  <div class="container clearfix">
    <div style="background-color: #fff">
      <div class="p15 touxiang">
        <span>头像</span>
        <img :src="list.profile.avatar || require('@/assets/images/head-portrait.png')" alt />
      </div>
      <div class="xian"></div>
      <van-cell title="手机号" :value="list.phone" />
      <van-cell title="真实姓名" to="real-name" is-link :value="list.profile.truename" />
      <van-cell title="昵称" to="nickname" is-link :value="list.profile.nickname" />

      <van-cell title="报考科目" :value="list.profile.subject_name" />
      <van-cell title="报考省市" :value="city" />
      <van-divider style="margin: 0px" />
      <van-cell title="修改密码" to="change-password" is-link value="去修改" />
      <van-divider style="margin: 0px" />
      <van-cell title="邮寄地址" to="mailing-address" is-link value="去修改" />
    </div>
  </div>
</template>

<script>
import { getProfile } from '@/api/mine/personal'
export default {
  data() {
    return {
      list: {
        profile: {}
      },
      city: null,
      columns: [],
      customFieldName: {
        text: 'cityName',
        children: 'cities'
      }
    }
  },
  computed: {},
  mounted() {
    this.fetchList()
    this.getSubject()
  },

  methods: {
    // 获取首页数据
    fetchList() {
      getProfile().then(res => {
        this.list = res.data.member
        this.city = `${this.list.profile.province_name || ''} / ${this.list.profile.city_name || ''}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  min-height: calc(100vh);
  overflow: hidden;
  background: #f7f7f7;
}
::v-deep .van-cell {
  .van-cell__title {
    font-size: 13px;
    font-weight: 500;
    color: #888888;
  }
  .van-cell__value {
    font-size: 14px;
    // font-weight: 500;
    color: #000000;
  }
}

.touxiang {
  display: flex;
  height: 83px;
  justify-content: space-between;
  align-items: center;
  span {
    font-size: 13px;
    font-weight: 500;
    color: #666666;
  }
  img {
    // display: inline-block;
    // right: 0;
    width: 50px;
    height: 50px;
    border-radius: 50px;
  }
}

.xian {
  margin: 0 15px;
  height: 1px;
  background: #ebedf0;
}
</style>
